<template>
  <div class="statistics-personnel-container common-table-theard">
    <p class="common-list-bread">列表</p>
    <div class="common-query-box">
      <el-form :inline="true"  labelWidth="90px">
        <el-form-item :label="nameDesc+'：'" class="width-440">
          <el-cascader
            v-model="checkedList"
            :options="options"
            :props="props"
            filterable
            :show-all-levels="false"
            clearable
          ></el-cascader><!-- @change="changeValue"   -->
        </el-form-item>
        <el-form-item label="时间：" class="width-160">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="startDate"
            type="date"
            :clearable="false"
            :editable="false"
            placeholder="开始时间"
          >
          </el-date-picker>
          至
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="endDate"
            type="date"
            :clearable="false"
            :editable="false"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            class="common-btn-primary left"
            size="small"
            @click="asyncGetTableData"
            >统计</el-button
          >
          <el-button class="common-btn-solid" size="small" @click="onClickRest"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-wrapper" v-if='isResult'>
      <div class="common-table-box">
        <div class="common-table-title">
           {{nameDesc == '人员'?'人员出勤':nameDesc}}统计
        </div>
        <el-table
          :data="tableData"
          border
          stripe
        >
          <el-table-column
            label=""
            align="right"
            width="150">
            <el-table-column
              prop="name"
              label=""
              width="120">
            </el-table-column>
          </el-table-column>

          <el-table-column
            :label="item.year + '年'"
            v-for="(item, idx) in data"
            :key="idx"
          >
            <el-table-column :label="item.month">
              <el-table-column
                v-for="(obj, index) in item.days"
                :key="index"
                :label="obj.day"
                min-width="30"
              >
                <template slot-scope="scope">
                  <span
                    v-for="(info, infoIdx) in scope.row.dateList"
                    :key="infoIdx"
                  >
                    <span v-if="obj.date == info" class="ok">√</span>
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div class="echarts-wrapper">
        <div class="echarts-item" v-for="(item,idx) in list" :key="idx">
          <p class="common-list-bread">{{item.name}}</p>
          <div class="echarts-item-content">
            <div class="echarts-info left-task">
              <p class="echarts-title">试验任务</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  :id="'echarts'+idx+0"
                  style="height:150px;width:250px;"
                ></div>
                <div class="table-item">  
                  <el-table :data="item.taskPancakeStatisticsVoList" border
                    ><!-- width="110"  -->
                    <el-table-column label="" width="40" align="left">
                      <template slot-scope="scope">
                        <span class="temp"   :style="{background:colorPalette[scope.$index%colorPalette.length]}"></span>
                      </template>  
                    </el-table-column>
                    <el-table-column
                      label="任务名称"
                      prop="name"
                      align="left"
                    ></el-table-column>
                    <el-table-column
                      label="工作天数"
                      prop="value"
                      width="130"
                      align="left"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="echarts-info">
              <p class="echarts-title">试验科目</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                :id="'echarts'+idx+1"
                  style="height:150px;width:250px;"
                ></div>
                <div class="table-item">
                  <el-table :data="item.subjectsPancakeStatisticsVoList" border
                    ><!-- width="110"  -->
                    <el-table-column
                      label=""
                      width="40"
                      align="left"
                    >
                    <template slot-scope="scope">
                        <span class="temp"   :style="{background:colorPalette[scope.$index%colorPalette.length]}"></span>
                      </template> 
                    </el-table-column>
                    <el-table-column
                      label="任务名称"
                      prop="name"
                      align="left"
                    ></el-table-column>
                    <el-table-column
                      label="工作天数"
                      prop="value"
                      width="130"
                      align="left"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";

// 引入饼状图
import "echarts/lib/chart/pie";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import macarons from "echarts/theme/macarons";
import {getPreMonth} from "utils/tools";
import { ref, reactive, onMounted,toRefs,watch,nextTick } from "@vue/composition-api";

export default {
  setup(props, { root }){
    let data = reactive({
      isResult: true, //初始不展示列表 默认false
      dropData: [], //下拉数据
      dataTime: [ //表头日期时间
        {
          year: 2020,
          month: 10,
          day: 29,
          date: "2020-10-29",
        },
        {
          year: 2020,
          month: 10,
          day: 30,
          date: "2020-10-30",
        },
        {
          year: 2020,
          month: 10,
          day: 31,
          date: "2020-10-31",
        },
        {
          year: 2020,
          month: 11,
          day: 1,
          date: "2020-11-01",
        },
        {
          year: 2020,
          month: 11,
          day: 2,
          date: "2020-11-02",
        },
        {
          year: 2020,
          month: 11,
          day: 3,
          date: "2020-11-03",
        },
        {
          year: 2020,
          month: 11,
          day: 4,
          date: "2020-11-04",
        },
      ],
      data: [],//最终处理后的列表数据
      tableData: [ //列表选中的集合
        {
          name: "haha",
          dateList: ["2020-10-31", "2020-11-02"],
        },
        {
          name: "帅哥",
          dateList: [],
        },
        {
          name: "帅哥1",
          dateList: ["2020-10-29", "2020-11-03"],
        },
        {
          name: "帅哥2",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥3",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥4",
          dateList: [
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
          ],
        },
        {
          name: "帅哥5",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥6",
          dateList: ["2020-11-02", "2020-11-03", "2020-11-04"],
        },
      ], //表格数据

      infoType: 3, //1->新增 2->编辑 3->修改基础信息  用户入口
      userId: "",
      isDialogVisible: false,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : 天数{c} ({d}%)",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            // center: ["50%", "60%"],
            label: {
              formatter: "{d}%",
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      list: [
        {
          name: "李佳琪",
          taskPancakeStatisticsVoList: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" },
          ],
          subjectsPancakeStatisticsVoList: [
            { value: 1, name: "科目1" },
          ],
        },{
          name: "周润发",
          taskPancakeStatisticsVoList: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" },
          ],
          subjectsPancakeStatisticsVoList: [
            { value: 1, name: "科目1" },
          ],
        },
      ],

      /* 人员数据 */
      props: { multiple: true, value: 'id', label: 'name', children: 'statisticsTreeVoList' },
      options: [
        {
          id: 1,
          name: "东南",
          statisticsTreeVoList: [
            {
              id: 2,
              name: "上海",
              statisticsTreeVoList: [
                { id: 3, name: "普陀" },
                { id: 4, name: "黄埔" },
                { id: 5, name: "徐汇" },
              ],
            },
            {
              id: 7,
              name: "江苏",
              statisticsTreeVoList: [
                { id: 8, name: "南京" },
                { id: 9, name: "苏州" },
                { id: 10, name: "无锡" },
              ],
            },
            {
              id: 12,
              name: "浙江",
              statisticsTreeVoList: [
                { id: 13, name: "杭州" },
                { id: 14, name: "宁波" },
                { id: 15, name: "嘉兴" },
              ],
            },
          ],
        },
        {
          id: 17,
          name: "西北",
          statisticsTreeVoList: [
            {
              id: 18,
              name: "陕西",
              statisticsTreeVoList: [
                { id: 19, name: "西安" },
                { id: 20, name: "延安" },
              ],
            },
            {
              id: 21,
              name: "新疆维吾尔族自治区",
              statisticsTreeVoList: [
                { id: 22, name: "乌鲁木齐" },
                { id: 23, name: "克拉玛依" },
              ],
            },
          ],
        },
      ],
      /* 开始结束时间 */
      startDate: "", //任务开始时间
      endDate: "", //任务结束时间
      /* color集合 */
      colorPalette: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        checkedList:[],//下拉多选集合
        preMonthDate:'',
        curDate: new Date().Format("yyyy-MM-dd"),
        path:{'/statisticsPersonnel':1,'/statisticsEquipment':2,'/statisticsPlace':3,'/statisticsTestEquipment':4,},
        nameObj:{'1':'人员','2':'试验装备','3':'试验场地','4':'被测装备'},
        nameDesc: '', 
    });

    console.log(root.$route.path)
    data.nameDesc = data.nameObj[data.path[root.$route.path]];
    data.preMonthDate = getPreMonth(data.curDate);

    console.log(data.nameDesc)
    console.log(data.curDate)
    console.log(data.preMonthDate)


    /* const { ctx } = getCurrentInstance()
    console.log(ctx.$router)
    console.log(ctx.$router.currentRoute.value)
    console.log(data.curDate) */

    //处理后台的时间转换结构
    const dateList = () => {
      let obj = {};
      let info = {};
      let dateArr = [];
      data.dataTime.forEach((item, index) => {
        let ym = item.year+ "" + item.month;
        if (obj[ym]) {
          info.days.push({ day: item.day, date: item.date });
          if (index == data.dataTime.length - 1) {
            dateArr.push(info);
          }
        } else {
          if (info && info.year) {
            dateArr.push(info);
            console.log(info);
            info = {};
          }
          obj[ym] = ym;
          info.year = item.year;
          info.month = item.month;
          info.days = [{ day: item.day, date: item.date }];
        }
      });
      // console.log(dateArr);
      return dateArr;
    }

    data.data = dateList();//此处为假数据  调试用 后 删除该行代码

    //图表生成
    const createEcharts = ()=>{
      data.list.forEach((item,index) => {
       let myChart = echarts.init(document.getElementById('echarts'+index+0), "macarons");
       let options = data.option;
       options.series[0].data = item.taskPancakeStatisticsVoList;
       myChart.setOption(options);

       let myChart2 = echarts.init(document.getElementById('echarts'+index+1), "macarons");
       let options2 = data.option;
       options2.series[0].data = item.subjectsPancakeStatisticsVoList;
       myChart2.setOption(options2);
      })
    }


     //获取列表数据???
    const asyncGetTableData = ()=> {
      if ((!data.startDate && data.endDate) || (data.startDate && !data.endDate)) {
          root.$message.error('请完善时间填写');
      } else if( data.startDate && data.endDate && data.startDate > data.endDate) {
        root.$message.error('请开始时间不能大于结束时间');
      } else {
        let checkeds = [];
        data.checkedList.forEach(item => {
          checkeds.push(item[item.length-1]);
        });
        root.$axios
          .get("/statistics/listBaseResourceStatistics", {
            params: {
              startDate: data.startDate || data.preMonthDate,
              endDate: data.endDate || data.curDate,
              ids: checkeds.join(','),
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              let data = res.data.data;
              data.isResult = true;
              data.dataTime = data.dateVoList;
              data.tableData = data.baseResourceDateVoList;
              data.data = dateList();
              data.list = data.pancakeBaseResourceVoList;
              nextTick(()=>{
                createEcharts();
              });
            } else {
              root.$message.error(res.data.msg);
            }
          }); 
      }
    }

    //重置筛选数据
    const onClickRest = ()=> { 
      data.startDate = '';
      data.endDate = '';
      data.checkedList = [];
      data.isResult = false;
    }

    //获取分组下拉数据列表
     const asyncGetTreeList = ()=> {
      root.$axios.get("/statistics/listStatisticsTree", {
          params: {
            type: 1, //请求类型 1=资源统计树形 2=任务树形 3=科目树形
            resourceType: data.path[root.$route.path] //资源类型 1=实验人员 2=实验装备 3=实验场地 4=被测装备
          },
        }).then((res) => {
        if (res.data.code === 200) {
          data.dropData = [...res.data.data];
        } else {
          root.$message.error(res.data.msg);
        }
      });
    }
      watch(() => root.$route, (to, from) => {
      // watch(() => $route.path, (to, from) => {
        console.log('切换路由 ')
        // console.log(data);
        console.log(to, from);
        data.nameDesc = data.nameObj[data.path[root.$route.path]];
        onClickRest();
      }/* ,
      { immediate: true } */
    );

    onMounted(()=>{
      nextTick(()=>{
        createEcharts();
      });
    })



    return {
      ...toRefs(data),asyncGetTableData,onClickRest,asyncGetTreeList
    }
  },
  
  created() {
    // this.getQueryParams();
    /* this.asyncGetTableData();
      this.asyncGetDepartmentList();
      this.asyncGetTreeList(); */

    //10代表color集合数量 13代表对应的多少数据
    /* 13%10 */

    /* this.nameDesc = this.nameObj[this.path[this.$route.path]]; 
    console.log('this.nameDesc')
    console.log(this.nameDesc)
    this.data = this.dateList(); */
  },
  /* beforeRouteUpdate (to,from,next) {
    console.log('aaaaaaa')
    next()
  }, */
  mounted() {
    // console.log(this.curDate) 

     /*  this.preMonthDate = getPreMonth(this.curDate)
      console.log('this.preMonthDate') 
      console.log(this.preMonthDate) 

      this.createEcharts(); */
    /* myChart = echarts.init(document.getElementById("main"), "macarons");

    // 使用刚指定的配置项和数据显示图表。 this.option
    myChart.setOption(this.option); */

  },
  methods: {
    //修改多选下拉框数据
     /* changeValue(value) {
       console.log(value)
     }, */
    //处理后台的时间转换结构
    /* dateList() {
      let obj = {};
      let info = {};
      let dateArr = [];
      this.dataTime.forEach((item, index) => {
        let ym = item.year+ "" + item.month;
        if (obj[ym]) {
          info.days.push({ day: item.day, date: item.date });
          if (index == this.dataTime.length - 1) {
            dateArr.push(info);
          }
        } else {
          if (info && info.year) {
            dateArr.push(info);
            console.log(info);
            info = {};
          }
          obj[ym] = ym;
          info.year = item.year;
          info.month = item.month;
          info.days = [{ day: item.day, date: item.date }];
          console.log("这是下标" + index);
          console.log(info);
        }
      });
      console.log(dateArr);
      return dateArr;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.name == "帅哥") {
        return "warning-row";
      }
      return "";
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.name == "帅哥") {
        // return [1, 2];
        return [1, this.dataTime.length+1];
        // return [1, 8];
      }
    }, */
    //获取列表数据???
    /* asyncGetTableData() {
      if ((!this.startDate && this.endDate) || (this.startDate && !this.endDate)) {
          root.$message.error('请完善时间填写');
      } else if( this.startDate && this.endDate && this.startDate > this.endDate) {
        this.$message.error('请开始时间不能大于结束时间');
      } else {
        let checkeds = [];
        this.checkedList.forEach(item => {
          checkeds.push(item[item.length-1]);
        });
        this.$axios
          .get("/statistics/listBaseResourceStatistics", {
            params: {
              startDate: this.startDate || this.preMonthDate,
              endDate: this.endDate || this.curDate,
              ids: checkeds.join(','),
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              let data = res.data.data;
              this.isResult = true;
              this.dataTime = data.dateVoList;
              this.tableData = data.baseResourceDateVoList;
              this.data = this.dateList();
              this.list = data.pancakeBaseResourceVoList;
              this.createEcharts();
            } else {
              this.$message.error(res.data.msg);
            }
          }); 
      }
    }, */
    //图表生成
    /* createEcharts(){
      this.list.forEach((item,index) => {
       let myChart = echarts.init(document.getElementById('echarts'+index+0), "macarons");
       let options = this.option;
       options.series[0].data = item.taskPancakeStatisticsVoList;
       myChart.setOption(options);

       let myChart2 = echarts.init(document.getElementById('echarts'+index+1), "macarons");
       let options2 = this.option;
       options2.series[0].data = item.subjectsPancakeStatisticsVoList;
       myChart2.setOption(options2);
      })
    }, */
    /* //重置筛选数据
    onClickRest() { 
      this.startDate = '';
      this.endDate = '';
      this.checkedList = [];
      this.isResult = false;
    }, */
    
    //获取分组下拉数据列表
    /* asyncGetTreeList() {
      this.$axios.get("/statistics/listStatisticsTree", {
          params: {
            type: 1, //请求类型 1=资源统计树形 2=任务树形 3=科目树形
            resourceType: this.path[this.$route.path] //资源类型 1=实验人员 2=实验装备 3=实验场地 4=被测装备
          },
        }).then((res) => {
        if (res.data.code === 200) {
          this.dropData = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }, */
  },
  /* watch: {
    $route() {
      this.nameDesc = this.nameObj[[this.path[this.$route.path]]];
      // this.onClickRest();  //切换需要清除
    }
  } */
};
</script>
<style scoped>
.left {
  margin-left: 15px;
}

.statistics-personnel-container .el-table >>> thead th {
  padding: 5px 0;
}

.width-160 /deep/ .el-input {
  width: 160px;
}
.width-160 /deep/ .el-form-item__content {
  width: 345px;
}
.width-440 /deep/ .el-input {
  width: 440px;
}
/*  .common-query-box /deep/ .width-440  {
  margin-left: -54px;
} */
.width-440 /deep/ .el-form-item__content {
  width: 440px;
}
.common-table-title {
  font-weight: bold;
}
.statistics-personnel-container .el-table >>> thead.is-group th {
  background: #fff;
}

/* .statistics-personnel-container .el-table >>> .warning-row td,
.statistics-personnel-container .el-table--striped >>> .warning-row td {
  
} */
/*  padding: 0;
    height: 30px;
    line-height: 30px; */
.statistics-personnel-container .el-table >>> .warning-row,
.statistics-personnel-container .el-table--striped >>> .warning-row td {
  background: oldlace !important;
}

/* .statistics-personnel-container .el-table >>> thead th {
  padding: 5px 0;
}

.statistics-personnel-container .width-160 /deep/ .el-input {
  width: 160px;
}
.statistics-personnel-container .width-160 /deep/ .el-form-item__content {
  width: 345px;
} */
.echarts-wrapper,.echarts-item  {
  overflow: hidden;
  width: 100%;
}

.echarts-item {
  margin-bottom: 10px;
  background-color: #fff;
}
.echarts-item-content {
  width: 100%;
  display: flex;
  overflow-x: auto;
}
.echarts-info {
  position: relative;
  /* flex: 1; */
  width: 50%;
  padding-bottom: 20px;
  box-sizing:border-box;
}

.echarts-info.left-task::after{
  content:'';
  position: absolute;
  right:0;
  top:0;
  width:1px;
  background-color:#f3f3f3;
  height:100%
}
.echarts-title {
  padding: 20px 0 0 20px;
  font-weight: bold;
}
.echarts-table {
  width: 100%;
  display: flex;
}
.canvas {
  flex: 0 0 250px;
  margin: 36px 20px 26px 26px;
}
.table-item {
  width: 50%;
  flex: 1;
  margin: 0 40px 0 20px;
}
.temp {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin: left 2px;
}
.ok {
  display: block;
  text-align: center;
  font-size: 22px;
  color: #4D74E9;
}
</style>

